<template>
	<div class="app-container">
		<!-- ${table.comment!}-管理按钮 -->
		<div class="search-bar">
<#list table.fields as field>
	<#if field.propertyType=='LocalDate' || field.propertyType=='Date'>
			<el-date-picker v-model="searchData.${field.propertyName}"
							type="date"  placeholder="请选择${field.comment}查询"/>
	<#elseif field.propertyType=='LocalDateTime' || field.propertyType=='DateTime'>
			<el-date-picker v-model="searchData.${field.propertyName}"  value-format="yyyy-MM-dd HH:mm:ss"
			 style="margin-right: 10px"
			range-separator="至"
			start-placeholder="开始日期"
			end-placeholder="结束日期"
			type="daterange" />
	<#else>
			<el-input v-model="searchData.${field.propertyName}"
					  		 placeholder="请输入${field.comment}查询"/>
	</#if>
</#list>
			<el-button v-waves  type="primary" size="small"
                 icon="el-icon-search" @click="searchBtnHandle">查询</el-button>
			<el-button v-waves  type="info" size="small"
                 icon="el-icon-refresh" @click="resetTableList">显示全部</el-button>
			<div style="float: right;">
				<el-button v-waves type="primary" icon="el-icon-plus" @click="openAdd" size="small"
                   v-permission="'${buttonNamePre}add'">新增
				</el-button>
				<el-button v-waves type="info" icon="el-icon-edit" @click="openUpdate(null)" size="small"
                   v-permission="'${buttonNamePre}update'">修改
				</el-button>
				<el-button v-waves type="danger" icon="el-icon-delete" @click="deleteByIds(null)" size="small"
                   v-permission="'${buttonNamePre}delete'">删除
				</el-button>
				<el-upload v-permission="'${buttonNamePre}importExcel'" style="display: inline-block;margin: 0px 10px;"
						   :action="$baseServer+'${controllerMapping}/import/excel'" :headers="$store.getters.headerToken"
						   :on-success="importExcelSuccess" accept=".xls,.xlsx"
						   :show-file-list="false" :auto-upload="true">
					<el-button v-waves type="warning" icon="el-icon-upload2" size="small">批量导入</el-button>
				</el-upload>
				<el-button v-waves type="success" icon="el-icon-printer" @click="exportExcel" size="small"
						   v-permission="'${buttonNamePre}exportExcel'">批量导出
				</el-button>
			</div>
		</div>
		<!-- ${table.comment!}-列表 -->
		<el-table ref="dataTable" :data="tableData" stripe border @selection-change="handleTableSelectChange" v-loading="isLoading">
			<el-table-column type="selection" width="50" align="center" header-align="center"/>
<#list table.fields as field>
			<el-table-column label="${field.comment}" prop="${field.propertyName}" align="center"/>
</#list>
			<el-table-column fixed="right" label="操作" width="120" align="center">
				<template v-slot="scope">
					<el-button type="text" style="color: #13ce66;"
							   size="small" @click="openView(scope.row)">详情</el-button>
					<el-button v-permission="'${buttonNamePre}update'"
							   type="text" size="small" @click="openUpdate(scope.row)">修改
					</el-button>
					<el-button v-permission="'${buttonNamePre}delete'" style="color: #ff6d6d;"
							   type="text" size="small" @click="deleteByIds(scope.row)">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- ${table.comment!}-分页 -->
		<el-pagination style="text-align: center;margin-top:10px;" layout="total,prev,pager,next,sizes,jumper"
                   :page-size="pager.limit" :current-page="pager.page"
                   :total="pager.totalCount" @current-change="handleCurrentChange"
                   @size-change="handleSizeChange"
		/>
		<!-- 添加修改弹窗 -->
		<el-dialog :title="titleMap[dialogType]" :close-on-click-modal="dialogType !== 'view' ? false : true"
				   :visible.sync="dialogFormVisible" @close="resetTemp" width="800px" :key="'myDialog'+dialogIndex">
<#if templateHtml??>
			${templateHtml}
<#else>
			<el-form ref="dataForm" :model="temp" label-position="right" label-width="100px" :disabled="dialogType==='view'">
  <#list table.fields as field>
	<#if field.propertyName=='orderIndex'>
				<el-form-item label="顺序" prop="orderIndex"
                      :rules="[{required: true, message: '顺序不能为空'},{type: 'number', message: '必须为数字'}]">
					<el-input-number v-model="temp.orderIndex" :min="0"/>
				</el-form-item>
	<#elseif field.propertyName!='createTime' && field.propertyName!='updateTime'>
		<#--判断是否为null的规则-->
		<#assign rules1=field.metaInfo.nullable?string("","{required: true, message: '" + field.comment + "不能为空'}")>
		<#if field.propertyType=='String'>
			<#if field.metaInfo.length gte 255>
				<el-form-item label="${field.comment}" prop="${field.propertyName}"
                      :rules="[${rules1}]">
					<el-input v-model="temp.${field.propertyName}" type="textarea" maxlength="${field.metaInfo.length}"
                    placeholder="请输入${field.comment}"/>
				</el-form-item>
			<#else>
				<el-form-item label="${field.comment}" prop="${field.propertyName}"
                      :rules="[${rules1}]">
					<el-input v-model="temp.${field.propertyName}" placeholder="请输入${field.comment}"/>
				</el-form-item>
			</#if>
		<#elseif field.propertyType=='Integer' || field.propertyType=='Long'
			|| field.propertyType=='BigDecimal'|| field.propertyType=='Double'>
			<#--数字的可能有2种规则，所以单独判断-->
			<#assign rules2=field.metaInfo.nullable?string("{type: 'number', message: '必须为数字'}","{required: true, message: '" + field.comment + "不能为空'},{type: 'number', message: '必须为数字'}")>
				<el-form-item label="${field.comment}" prop="${field.propertyName}"
                      :rules="[${rules2}]">
					<el-input-number v-model.number="temp.${field.propertyName}" placeholder="请输入${field.comment}"/>
				</el-form-item>
		<#elseif field.propertyType=='LocalDate' || field.propertyType=='Date'>
				<el-form-item label="${field.comment}" prop="${field.propertyName}"
					  :rules="[${rules1}]">
					<el-date-picker v-model="temp.${field.propertyName}" type="date" placeholder="请选择${field.comment}"/>
				</el-form-item>
        <#elseif field.propertyType=='LocalDateTime' || field.propertyType=='DateTime'>
				<el-form-item label="${field.comment}" prop="${field.propertyName}"
					  :rules="[${rules1}]">
					<el-date-picker v-model="temp.${field.propertyName}" type="datetime" placeholder="请选择${field.comment}"/>
				</el-form-item>
		<#else>
				<el-form-item label="${field.comment}" prop="${field.propertyName}"
					  :rules="[${rules1}]">
					<el-input v-model="temp.${field.propertyName}" placeholder="请输入${field.comment}"/>
				</el-form-item>
        </#if>
	</#if>
  </#list>
			</el-form>
</#if>
			<div slot="footer" class="dialog-footer">
				<el-button v-waves type="primary" v-if="dialogType!=='view'" @click="saveData">保存</el-button>
				<el-button v-waves @click="dialogFormVisible=false">取消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import waves from '@/directive/waves'
import crudMixin from "@/mixin/crudMixin";
<#if templateHtml?? && templateHtml?contains("my-wang-editor")>
import MyWangEditor from '@/components/MyWangEditor/index.vue';
</#if>

export default {
  <#if templateHtml?? && templateHtml?contains("my-wang-editor")>
  components: {MyWangEditor},
  </#if>
  directives: {waves},
   mixins: [crudMixin],
  data() {
    return {
      url: {
        list: "${controllerMapping}/list",
        add: "${controllerMapping}/add",
        info: "${controllerMapping}/getById",
        update: "${controllerMapping}/update",
        delete: "${controllerMapping}/delete",
        export:"${controllerMapping}/export/excel"
      },
    }
  },
  created() {
    this.loadTableList();
    this.resetTemp();
<#if jsCreated??>
    ${jsCreated}
</#if>
  },
  methods: {
    
<#if jsMethods??>
    ${jsMethods}
</#if>
  }
}
</script>
<#if templateCss??>
<style>
    ${templateCss}
</style>
</#if>
<style lang="scss" scoped>
.search-bar {
  margin-bottom: 10px;
  ::v-deep {
    .el-input,
    .el-select {
      width: 180px;
      margin-right: 10px;
      margin-bottom: 5px;
    }
  }
}
</style>